<template>
  <div class="sm-dropdown-bg">
    <div
      class="sm-dropdown-select"
      tabindex="-1"
      ref="smSelectRef"
      @click="smSelect"
      @blur="smSelectBlur"
    >
      <span>{{ valueType }}</span>
      <span
        class="sm-dropdown-title"
        :class="{'sm-dropdown-title1': showType}"
      ></span>
    </div>
    <ul
      class="sm-dropdown-ul"
      :class="{'sm-dropdown-ul-show': showType}"
    >
      <li
        v-for="(item, index) in options1"
        :key="index"
        :value="item.value"
        :class="{'sm-dropdown-li': item.value == useValue}"
        @click.stop="liclick(item)"
      >{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MpDropdownMenu',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      // 绑定值
      type: String,
      default: () => {
        return '0'
      }
    },
    options: {
      // 数据源
      type: Array,
      default: () => {
        return [
          { text: '全部商品', value: '0' },
          { text: '新款商品', value: '1' },
          { text: '活动商品', value: '2' }
        ]
      }
    },
    urlOptions: {
      // 动态数据源
      type: Object,
      default: () => {
        return {
          url: '',
          labelKey: '',
          valueKey: ''
        }
      }
    }
  },
  watch: {
    options: {
      // 数据源
      handler (val) {
        this.options1 = val
        if (!val || val.length === 0) {
          this.options1 = [{ text: '默认数据', value: '0' }]
        }
        if (this.options1.find((v) => v.value === this.useValue)) {
          this.valueType = this.options1.find(
            (v) => v.value === this.useValue
          ).text
        }
      },
      immediate: true,
      deep: true
    },
    value: {
      // 绑定的值
      handler (val) {
        this.useValue = val
      },
      immediate: true,
      deep: true
    },
    useValue: {
      // 数据改变时使用的值
      handler (val) {
        if (this.options1.find((v) => v.value === val)) {
          this.valueType = this.options1.find((v) => v.value === val).text
        }
      },
      immediate: true,
      deep: true
    }
  },
  data () {
    return {
      showType: false, // 下拉显示隐藏
      valueType: '', // title 显示文字
      useValue: '', // 改变时使用的值
      options1: [] // 数据源
    }
  },
  methods: {
    // 点击事件 控制显示隐藏
    smSelect () {
      this.showType = !this.showType
      this.$refs.smSelectRef.focus()
    },
    // div失去焦点事件
    smSelectBlur () {
      setTimeout(() => {
        this.showType = false
      }, 200)
    },
    // 下拉列表点击事件
    liclick (item) {
      this.useValue = item.value
      this.showType = false
      this.$emit('change', item.value)
    }
  }
}
</script>

<style scoped lang="scss">
.sm-dropdown-bg {
  display: inline-block;
  position: relative;
  .sm-dropdown-select {
    min-width: 35.2px;
    display: inline-block;
    text-align: center;
    background-color: white;
    padding: 6px 15px;
    // box-shadow: 0 .001rem .48px #eee;
    // border: 1px solid #efefef;
    font-size: 5.92px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sm-dropdown-ul {
    width: 100%;
    max-height: 80px;
    border: 1px solid #eee;
    line-height: 30px;
    font-size: 5.6px;
    padding: 8px;
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    position: absolute;
    z-index: 2002;
    overflow-y: auto;
    display: none;
  }
  .sm-dropdown-ul::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .sm-dropdown-ul-show {
    display: block;
  }
  .sm-dropdown-li {
    color: red;
  }
  .sm-dropdown-title {
    margin-top: -2.128px;
    margin-left: 1.6px;
    border: 1.28px solid;
    border-color: transparent transparent #dcdee0 #dcdee0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0.8;
    content: "";
  }
  .sm-dropdown-title1 {
    margin-top: -0.432px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .sm-dropdown-input {
    display: inline;
    padding: 0;
    border: 0px;
  }
}
</style>
